<template>
  <div class="addVideo">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="视频名称" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="视频上传" prop="video">
        <el-upload
          ref="upload"
          :limit="1"
          action
          :file-list="videoFile"
          :auto-upload="false"
          :on-remove="removeVideoFile"
          :on-change="changeVideoFile"
        >
          <el-button slot="trigger" size="small" type="primary">选取视频</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片上传" prop="picture">
        <el-upload
          ref="upload"
          :limit="1"
          action
          :auto-upload="false"
          :file-list="pictureFile"
          :on-remove="removePictureFile"
          :on-change="changePictureFile"
        >
          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片预览" prop="name">
        <img :src="picture" alt="图片预览" srcset width="200" height="120" />
      </el-form-item>
      <el-form-item label="视频简介">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.introduce"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即上传</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
interface staticType {
  [key: string]: string
}
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class addVideo extends Vue {
  private form = {
    introduce: '',
    title: '',
    format: ''
  }
  rules = {
    title: [{ required: true, message: '请输入视频标题', trigger: 'change' }]
  }
  private picture: string = ''
  private videoFile: Array<File> = []
  private pictureFile: Array<File> = []
  onSubmit() {
    const { status, username } = this.$store.state.user.userInfo
    const config = {
      status,
      username,
      origin: 'add',
      way: 'video'
    }
    const staticData: staticType = { ...config, ...this.form }
    let formData = new FormData()
    for (const data in staticData) {
      typeof data === 'string' && formData.append(data, staticData[data])
    }
    formData.append('mp4file', this.pictureFile[0])
    formData.append('mp4file', this.videoFile[0])
    this.$axios.post('/upload/upMp4', formData)
  }
  removePictureFile() {
    this.pictureFile = []
    this.picture = ''
  }
  removeVideoFile() {
    this.videoFile = []
  }
  changeVideoFile(e: any) {
    const nameArr = ['mp3', 'mp4']
    const lastName = e.name.split('.')
    const videoFile: File = e.raw
    if (nameArr.includes(lastName[lastName.length - 1])) {
      this.videoFile = [videoFile]
      this.form = lastName
    } else {
      this.$message.warning('仅支持上传mp3，mp4格式的视频')
      this.videoFile = []
      return
    }
  }
  changePictureFile(e: any, fileArr: Array<File>) {
    const nameArr = ['jpg', 'png', 'webp', 'jepg']
    const pictureFile: File = e.raw
    const lastName = e.name.split('.')
    if (nameArr.includes(lastName[lastName.length - 1])) {
      this.pictureFile = [pictureFile]
    } else {
      this.$message.warning('仅支持上传jpg,png,webp格式的图片')
      this.pictureFile = []
      return
    }
    let url = window.webkitURL || window.URL
    let imgfileurl = url.createObjectURL(e.raw)
    this.picture = imgfileurl
  }
}
</script>

<style lang="less" scoped>
.addVideo {
  box-sizing: border-box;
  padding: 48px 100px;
}
</style>